
import React, { useEffect, useState } from 'react'
import Taro from '@tarojs/taro';
import { getCurrentInstance, useReachBottom, usePullDownRefresh } from '@tarojs/taro'
import { backgroundObj, loginData, goBack, toast } from '@/utils/utils'
import { fetchPageConfigDetailForUser } from '@/server/shop';
import Input from '@/components/Input';
import { View, Picker, Text, Button } from '@tarojs/components'
import { fakeSaveUserAddress } from '@/server/shop';
import { AtForm, AtInput, AtButton, AtSwitch, AtFloatLayout, AtList, AtListItem } from 'taro-ui'
import "taro-ui/dist/style/components/form.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/switch.scss";
import "taro-ui/dist/style/components/float-layout.scss";
import "./index.scss";
const SetAddressBook = (props) => {
    const { visibleMask = {}, onClose, handleCallback } = props;
    const {
        show = false,
        detail = {},
    } = visibleMask
    const [data, setData] = useState({})
    const { receiveUsername, receiveMobile = '', address, provinceCode, cityCode, districtCode,
        provinceName, cityName, districtName, defaultFlag
    } = data;
    const cityValue = provinceName + cityName + districtName;
    const onFinish = async () => {
        const { } = data
        console.log(data)
        if (!provinceCode || !cityCode || !districtCode) {
            return toast('请选择地址')
        } else if (!receiveUsername || !receiveMobile) {
            return toast('请填写完整信息后提交')
        } else if (receiveMobile.length > 11) {
            return toast('请填写正确的手机号码')
        } else {
            fakeSaveUserAddress({
                ...data,
                defaultFlag: defaultFlag ? '1' : '0'
            }).then(val => {
                onClose()
                handleCallback()
            })
        }
    }
    const handleChange = (val = {}) => {
        setData({
            ...data,
            ...val
        })
    }
    useEffect(() => {
        if (show) {
            setData(detail)

        } else {
            setData({})
        }
    }, [show])
    const JsonKeyList = ['provinceCode', 'cityCode', 'districtCode']
    const JsonValueList = ['provinceName', 'cityName', 'districtName']
    return <AtFloatLayout
        title='编辑地址'
        scrollY
        onClose={() => onClose()}
        isOpened={show}>
        <View className='MaskSetAddress_box'>
            <Input
                name='receiveUsername'
                title='收货人'
                required
                type='text'
                placeholder='请输入收货人'
                value={receiveUsername}
                onChange={(e) => handleChange({
                    receiveUsername: e
                })}
            />
            <Input
                name='receiveMobile'
                title='手机号'
                required
                type='text'
                placeholder='请输手机号'
                value={receiveMobile}
                onChange={(e) => handleChange({
                    receiveMobile: e
                })}
            />
            <View>
                <Picker mode='region' level={'region'} onChange={(e) => {
                    const { code = [], value = [] } = e.detail
                    let dataOnj = {}
                    code.forEach((item, index) => {
                        JsonKeyList.forEach((o, c) => {
                            if (index === c) {
                                if (c === 0) {
                                    dataOnj[JsonKeyList[c]] = code[c].slice(0, 2)
                                } else if (c === 1) {
                                    dataOnj[JsonKeyList[c]] = code[c].slice(0, 4)
                                } else {
                                    dataOnj[JsonKeyList[c]] = code[c]
                                }

                            }
                        })
                        JsonValueList.forEach((a, s) => {

                            if (index === s) {
                                if (s === 0) {
                                    dataOnj[JsonValueList[s]] = value[s].slice(0, 2)
                                } else if (s === 1) {
                                    dataOnj[JsonValueList[s]] = value[s].slice(0, 4)
                                } else {
                                    dataOnj[JsonValueList[s]] = value[s]
                                }

                            }
                        })
                    })
                    console.log(dataOnj)
                    setData({
                        ...data,
                        ...dataOnj
                    })
                }}>
                    <View>
                        <AtListItem
                            title='所在地区'
                            extraText={cityValue ? cityValue : '请选择'}
                        />

                    </View>

                </Picker>
            </View>
            <Input
                name='address'
                title='详细地址'
                type='text'
                placeholder='请输详细地址'
                value={address}
                onChange={(e) => handleChange({
                    address: e
                })}
            />

            <AtSwitch checked={defaultFlag === '1'} onChange={(e) => {
                handleChange({
                    defaultFlag: e ? '1' : '0'
                })
            }} title='设为默认收货地址'></AtSwitch>
            <Button onClick={() => {
                onFinish()
            }}>保存</Button>
        </View>
    </AtFloatLayout >


}
export default SetAddressBook

